<template>
  <section id="map">
    <div>validate--component</div>
    <!-- <a-button 
        type="primary" 
        :style="{position:'absolute',top:'10px',right:'10px',zIndex:'3',padding:'0 10px'}"
        @click="reInput"
        >再次输入</a-button
    >
    <a-modal
      title="输入路段"
      :visible="info.show"
      @cancel="cancel"
      @ok="loadData"
    >
      <a-textarea 
        v-model="info.data" 
        placeholder="请输入" 
        :rows="4"
      />
    </a-modal> -->
  </section>
</template>
<script lang="ts">
import Vue from 'vue';
import { Component } from 'vue-property-decorator';
import { importAMap } from '../../platform/utils/map';

@Component
export default class validate extends Vue{
    info:{
      show:boolean,
      data:string,
      map:IObject,
      polyline:IObject
    } = {
        show:true,
        data:'',
        map: {},
        polyline: {}
    }
    polyline:IObject = {};
    map:IObject = {};

    cancel () {
      this.info.show = false;
    }

    error () {
        this.$message.error(`输入的数据不能包含符号 "|"`);
    }

    loadData () {
      this.info.show = false
      if (this.info.data.indexOf("|") > -1) {
        this.error()
        return false;
      }
      let pointString = this.info.data.split(";");
      if (pointString.length > 0) {
        let path = pointString.map(vo => {
          let point = vo.split(",");
          return new AMap.LngLat(parseFloat(point[0]),parseFloat(point[1]))
        });
        if (this.polyline) {
          this.map.remove(this.polyline);
        }
        this.polyline = new AMap.Polyline({
          path,
          borderWeight: 3, // 线条宽度，默认为 1
          strokeColor: "red", // 线条颜色
          lineJoin: "round" // 折线拐点连接处样式
        });
        console.log(this.polyline)
        this.map.add(this.polyline);
        this.map.setCenter(path[0]);
      }
    }

    reInput () {
        this.info.show = true;
        this.info.data = '';
    }

    mounted () {
        importAMap().then(() => {
            let map = new AMap.Map("map", {
                resizeEnable: true, //是否监控地图容器尺寸变化
                zoom: 15, //初始化地图层级
                center: [113.874378, 23.10591] //初始化地图中心点
            })
            this.map = map
        })
    }
}
</script>
<style lang="scss" scoped>
  #map{
    height: 100%;
    margin-top: 60px;
  }
</style>